<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="lib/vue.js"></script>
</head>
<body>
<div id="root">
        <!--    使用输入事件+方法-->
<!--    <input @input="fn($event)" v-model="keyword" type="text">-->
        <!--    使用计算属性-->
<!--    <input v-model="keyword" type="text">-->
        <!--    使用侦听-->
    <input v-model="keyword" type="text">
    <p>{{searchArr}}</p>
</div>
</body>
<script>
    new Vue({
        el : '#root',
        data:{
            keyword:"",
            searchArr:[],
            arr:["zhangsan","lisi","wangwu","zhaoliu","yanqi","shenba","qianshi","xiaoshiyi"]
        },
        methods:{
            fn(e){
                if(this.keyword){
                    this.searchArr = this.arr.filter(item=>{
                        return item.includes(e.target.value.trim());
                    })
                }
            }
        },
        watch:{
            keyword(){
                if(this.keyword){
                    this.searchArr=  this.arr.filter(item=>{
                        return item.includes(this.keyword.trim());
                    })
                }else {
                    this.searchArr=[];
                }
            }
        }
        // computed:{
        //     searchArr(){
        //         return this.keyword && this.arr.filter(item=>{
        //             return item.includes(this.keyword.trim());
        //         })
        //     }
        // }
    })
</script>
</html>